<template>
  <div>
    <mt-tab-container v-model="selected">


      <!--我的-->
      <mt-tab-container-item id="我的">

        <div class="main_top">
          <div style="padding-top: 5%">

            <router-link :to="{path:'/user/login'}" v-if="loginInfo.avatar == null" @click.native="onOk" style="flex-direction:column;display: flex;  justify-content: center;
         align-items: center;">
              <img src="../../../assets/phone/icon/headimg.png"
                   style="width: 62px ;height: 62px "/>
              <label style="padding:3% ;color: white">请登陆</label>
            </router-link>

            <router-link :to="{path:'/user/login'}" v-else style="flex-direction:column;display: flex;  justify-content: center;
    align-items: center;">
              <img :src="headTitle"
                   style="width: 62px ;height: 62px; border-radius: 50%;"/>
              <label style="padding:3% ;color: white">{{loginInfo.username}}

              </label>
            </router-link>


          </div>
        </div>


        <!--正文内容-->
        <div style="  margin-top: 1.6%;flex-direction:row;background-color: white;  display: flex;">
          <router-link to="home" class="main_context">

            <img slot="" src="@/assets/phone/icon/relax.png" width="38" height="38" style="margin: 0 auto
">
            <label>收藏</label>
          </router-link>
          <router-link to="home" class="main_context">
            <img slot="" src="@/assets/phone/icon/leg.png" width="32" height="32" style="margin: 0 auto
">
            <label>足迹</label>
          </router-link>
          <router-link to="home" class="main_context">
            <img slot="" src="@/assets/phone/icon/dingyue.png" width="38" height="38" style="margin: 0 auto
">
            <label>订阅</label>
          </router-link>


        </div>
        <div style=" background-color: white ;flex-direction:row;  display: flex;">
          <router-link :to="{ name: 'phone-contractManagement' }" class="main_context">

            <img slot="" src="@/assets/phone/icon/contract.png" width="32" height="32" style="margin: 0 auto
">
            <label>合同添加</label>
          </router-link>
          <router-link :to="{name : 'phone-contractManagement-list'}" class="main_context">
            <img slot="" src="@/assets/phone/icon/fangwu.png" width="32" height="32" style="margin: 0 auto">
            <label>合同列表</label>
          </router-link>
          <router-link :to="{name : 'phone-contractManagement-list'}" class="main_context">
            <img slot="" src="@/assets/phone/icon/fangwu.png" width="32" height="32" style="margin: 0 auto">
            <label>合租列表</label>
          </router-link>


        </div>

        <div style=" background-color: white ;flex-direction:row;  display: flex;">
          <router-link :to="{ path: '/phone/landlordLeague' }" class="main_context">
            <img slot="" src="@/assets/phone/icon/mycharge.png" width="32" height="32" style="margin: 0 auto
">
            <label>房东加盟</label>
          </router-link>
          <router-link :to="{ path: '/phone/onlineRecruitment' }" class="main_context">
            <img slot="" src="@/assets/phone/icon/mycharge.png" width="32" height="32" style="margin: 0 auto
">
            <label>我要应聘</label>
          </router-link>
          <router-link :to="{ path: '/phone/onlineRecruitmentAbsorb' }" class="main_context">
            <img slot="" src="@/assets/phone/icon/mycharge.png" width="32" height="32" style="margin: 0 auto">
            <label>招聘信息</label>
          </router-link>
        </div>

        <mt-cell title="我的客服">
          <span> > </span>
          <img slot="icon" src="@/assets/phone/icon/kefu.png" width="24" height="24">
        </mt-cell>
        <mt-cell title="商务合作">
          <span> > </span>
          <img slot="icon" src="@/assets/phone/icon/hezuo.png" width="24" height="24">
        </mt-cell>
        <mt-cell title="推荐有奖">
          <span> > </span>
          <img slot="icon" src="@/assets/phone/icon/tuijian.png" width="24" height="24">
        </mt-cell>


      </mt-tab-container-item>
    </mt-tab-container>


  </div>
</template>
<script>
    import * as mint from 'mint-ui';
    import 'swiper/dist/css/swiper.css'
    import Vue from 'vue'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    import { ACCESS_TOKEN, USER_NAME,USER_INFO,USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"
    import {logout} from '@/api/login.js'
    import Swiper from 'swiper'

    export default {
        name: "mine",
        components: {
            ...mint,
            swiper,
            swiperSlide

        },

        data() {
            return {
                'galleryElements': '',
                'selected': '我的',
                'search': '',
                swiperOption: {
                    slidesPerView: 'auto',
                    spaceBetween: 10,
                    freeMode: true

                },
                banners: ['http://image.quanfangtong.net/Company_20170806105236JeUAyW/cotenant/mcq34uvhf.jpg', 'http://image.quanfangtong.net/Company_20170806105236JeUAyW/cotenant/mcq34uvhf.jpg'],
                loginInfo: {
                    'avatar': null,
                    'username': 'text'
                },
                url:{
                    headImage:'/sys/common/view/'
                }
            }

        },
        methods: {
            onOk() {
                logout().then((res) => {
                    window.location.href = "/";
                })
            }
        }, created() {
            let loginInfo = Vue.ls.get(USER_INFO);
            if (loginInfo !=null){
                this.loginInfo = loginInfo;
            }
            console.log(this.loginInfo)
        },
        computed: {
            headTitle: function () {
                return `${window._CONFIG['domianURL']}/${this.url.headImage}/${this.loginInfo.avatar}`;
            }
        }
    }

</script>
<style>

  .main_context {
    flex-direction: column;
    justify-content: center;
    display: flex;
    width: 33.3%;
    text-align: center;
    border-right: 1px solid #EEEEF1;
    border-bottom: 1px solid #EEEEF1;
    padding: 3%;
  }


  .main_notice .content {
    float: left;
    width: 12%;
    margin-right: 4%;
    color: #7E7E7E;
  }

  .main_notice {
    height: 20%;
    background: #fff;
    width: 100%;
  }

  .main_top {
    background: url('../../../assets/phone/index/background.png');
    background-size: 100%;
    /*height: 24%;*/
    width: 100%;
    vertical-align: middle;
    text-align: center;
  }

  .imgIcon {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

  }

  a {
    text-decoration: none !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }

  .housings {
    background-color: white;
  }

  .housings h3 {
    font-size: 16px;
    color: #333333;
    font-weight: normal;
    line-height: 18px;
    border-left: 3px solid #3696fe;
    padding-left: 7.5px;

  }

  .housings .housing-hd {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #dcdcdc;
    padding: 3% 3% 0px 3%;
  }

  .biaoti {
    float: left;
    width: 100%;
  }

  .housings-md {
    padding: 3%;
  }

  .housing-info .name {
    font-size: 16px;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .main_line {
    height: 1%;
  }

  .ant-layout-header {
    display: none;
  }
</style>


